<template>
	<div style="width: 600px;margin-left: 30%;">

		<div id="waitLogin" v-if="!chatRoomShow">
			<el-input placeholder="请输入用户名" v-model="loginName" style="width: 80%;"></el-input>
			<el-button @click="login()">登入</el-button>
		</div>
		<div id="chatRoom" v-if="chatRoomShow">
			<div id="chatWindow" v-html="messageList">
				<!-- {{messageList}} -->
			</div>
			<el-input v-model="msg"></el-input>
			<el-button @click="close_ws()" style="float: right;" type="danger">关闭对话</el-button>
			<el-button @click="sendMsg()" style="float: right;" type="primary">发送</el-button>

		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: "",
				ws: null,
				ws_url: 'ws://localhost:9999/websocket/chat/',
				messageList: '',
				loginName: "",
				chatRoomShow: false
			}
		},
		mounted() {

		},
		methods: {
			sendMsg() {
				if (this.msg != '') {
					this.ws.send(this.msg)
					this.msg = ''
				}
			},
			login() {
				//开启WebSocket
				this.ws = new WebSocket(this.ws_url + this.loginName)
				//建立WebSocket连接成功触发事件
				this.ws.onopen = this.onopen
				this.ws.onmessage = this.onmessage
				this.ws.onclose = this.onclose
				this.ws.onerror = this.onerror
			},
			onopen() {
				this.$notify({
				          title: '成功',
				          message: '成功加入聊天室',
				          type: 'success'
				        });
				this.chatRoomShow = !this.chatRoomShow
			},
			onmessage(evt) {
				console.log(evt)
				let received_msg = evt.data
				this.print_msg(received_msg)
			},
			onclose() {
				this.$notify({
				          title: '成功',
				          message: '退出聊天室',
				          type: 'success'
				        });
				this.chatRoomShow = !this.chatRoomShow
			},
			onerror() {
				this.$notify({
				          title: '错误',
				          message: '连接错误，请重新进入',
				          type: 'error'
				        });
				this.chatRoomShow = !this.chatRoomShow
			},
			print_msg(message) {
				let info = ""
				
				
				
				
				if (message.split(":").length < 2) {
					info = `<p class=sys>${message}</p>`
				} else {
					if (message.split(":")[0] === this.loginName) {
						info = `<div class=info><div class="uname_right">${message.split(":")[0]}</div><p class="right_msg">${message.split(":")[1]}</p></div>`
					}else{
						info = `<div class=info><div class="uname_left">${message.split(":")[0]}</div><p class="left_msg">${message.split(":")[1]}</p></div>`
					}
					
				}
				this.messageList = this.messageList + info
			},
			close_ws() {
				this.ws.close()
			}


		}
	}
</script>

<style>
	#chatWindow {
		width: 600px;
		height: 500px;
		border: 1px solid gray;
		border-radius: 8px;
		overflow: auto;
	}

	/* #chatWindow p {
		margin: 5px;
		padding: 0;
	} */
	.left{
		float: left;
	}
	.right{
		float: right;
	}
	.left_msg {
		/* clear: both; */
		width: 200px;
		height: 30px;
		line-height: 30px;
		color: white;
		float: left;
		border-radius: 2px;
		background-color: #07c;
		text-align: left;
		margin: 0px;
		margin-left: 5px;
		padding: 0;
	}
	
	.right_msg {
		/* clear: both; */
		width: 200px;
		height: 30px;
		line-height: 30px;
		color: #07c;
		float: right;
		border-radius: 2px;
		background-color: white;
		text-align: right;
		margin: 0px;
		margin-right: 5px;
		padding: 0;
	}

	.sys {
		width: 598;
		height: 30px;
		text-align: center;
	}
	.uname_right{
		float: right;
		/* width: 30px; */
		height: 30px;
		font-size: 14px;
		border-radius: 10px;
		line-height: 30px;
		border: 1px solid black;
	}
	.uname_left{
		float: left;
		/* width: 30px; */
		height: 30px;
		font-size: 14px;
		border-radius: 10px;
		line-height: 30px;
		border: 1px solid black;
	}
	.info{
		width: 598px;
		height: 30px;
	}
</style>
